<template>
  <div class="add-wrap">
    <div class="employ-box">
      <span class="title">姓名：</span>
      <div class="employ-con">
        <input class="content" type="text" maxlength="11" v-model="name" placeholder="请输入真实姓名" @blur="inputBlur"/>
      </div>
    </div>
    <div class="employ-box">
      <span class="title">身份证号码：</span>
      <div class="employ-con">
        <input class="content" type="text" maxlength="18" v-model="certNo" placeholder="请输入身份证号码" @blur="inputBlur"/>
      </div>
    </div>

    <div class="employ-box">
      <span class="title">企业名称：</span>
      <span class="company">{{companyName}}</span>
    </div>
    <div class="employ-box">
      <span class="title">入职日期：</span>
      <datetime format="YYYY-MM-DD" class="entry" v-model="entryTime" placeholder="请选择入职日期" :end-date="date"></datetime>
      <img src="./in.png" class="pic" onclick="return false"/>
    </div>
    <div class="employ-box">
      <span class="title">工号(选填)：</span>
      <div class="employ-con">
        <input class="content" type="text" placeholder="请输入工号" v-model="workNum" maxlength="19" @blur="inputBlur"/>
      </div>
    </div>

    <div class="employ-box">
      <span class="title">班次：</span>
      <popup-picker :data="workClassList" v-model="workClass" class="entry"
                    placeholder="请选择班次"></popup-picker>
      <img src="./in.png" class="pic" onclick="return false"/>
    </div>
    <div class="employ-box">
      <span class="title">部门(段位)：</span>
      <div class="employ-con">
        <input class="content" type="text" placeholder="请输入部门(段位)" v-model="workDept" @blur="inputBlur"/>
      </div>
    </div>
    <div class="employ-box">
      <span class="title">打卡地点：</span>
      <input class="address" type="text" placeholder="请选择打卡地点" v-model="address" readonly @click="openAddressList"/>
      <img src="./in.png" class="pic" onclick="return false"/>
    </div>

    <div class="btn-box" v-show="hideBtn">
      <button type="button" class="btn" @click="confirm">确定</button>
    </div>

    <div class="open-box" v-show="showList" @click="closeAddressList">
      <div class="open-list">
        <div class="name" v-for="(item,index) in punchAddressList" :key="index"
             @click="selectAddress(item.sn,item.address)">{{item.address}}
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../config/env"
  import {Datetime, PopupPicker} from 'vux'
  import {formatDate} from "../../config/util"

  export default {
    data() {
      return {
        id: "",
        name: "",
        certNo: "",
        entryTime: "",
        companyName: "",
        workNum: "",
        date: "",
        workDept: "",
        workClassList: [['早班', '中班', '晚班', '白班', '夜班']],
        punchAddressList: [],
        workClass: [],
        address: "",
        showList: false,
        userSign: "",
        sn: "",
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true//显示或者隐藏
      }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.companyName = this.$route.query.name;
      this.date = formatDate(new Date(), "yyyy-MM-dd");
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.queryKaAddress();
      //window.onresize监听页面高度的变化
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };
    },
    methods: {
      queryKaAddress() {//获取打卡地点
        let time = (new Date()).getTime();
        let url = baseUrl + "/data/get_ka_address?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/data/get_ka_address?sgin=" + this.userSign + "&mechanismId=" + this.id + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.punchAddressList = resultObj.data;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openAddressList() {//打开打卡地点
        this.showList = true;
      },
      closeAddressList() {
        this.showList = false;
      },
      selectAddress(sn, address) {//选择打卡地点
        this.sn = sn;
        this.address = address;
        this.showList = false;
      },
      checkInfo() {
        let reg1 = /^[\u2E80-\u9FFF]+$/;
        let reg2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9X])$/;
        if (this.name == "" || this.name == null || this.name == undefined) {
          this.$vux.toast.text("请输入真实姓名", "middle");
          return;
        } else if (!reg1.test(this.name)) {
          this.$vux.toast.text("请输入中文姓名", "middle");
          return;
        }
        if (this.certNo == "" || this.certNo == null || this.certNo == undefined) {
          this.$vux.toast.text("请输入身份证号码", "middle");
          return;
        } else if (!reg2.test(this.certNo)) {
          this.$vux.toast.text("请输入正确的身份证号，最后一位是字母时要大写", "middle");
          return;
        }
        if (this.entryTime == "" || this.entryTime == null) {
          this.$vux.toast.text("请选择入职日期", "middle");
          return;
        }

        if (String(this.workClass) == "" || String(this.workClass) == null) {
          this.$vux.toast.text("请选择班次", "middle");
          return;
        }
        if (this.workDept == "" || this.workDept == null) {
          this.$vux.toast.text("请输入部门(段位)", "middle");
          return;
        }
        if (this.address == "" || this.address == null) {
          this.$vux.toast.text("请选择打卡地点", "middle");
          return;
        }
        return true;
      },
      confirm() {
        if (this.checkInfo()) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let data = {
            "userName": this.name,
            "userCardNumber": this.certNo,
            "mechanismId": this.id,
            "sn": this.sn,//打卡机编号
            "workTime": this.entryTime,
            "workNum": this.workNum,
            "workClass": String(this.workClass),
            "duan": this.workDept,//段位
            "delStatus": 0
          };

          let time = (new Date()).getTime();
          let url = baseUrl + "/data/add_user_ka?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          this.axios.post(baseUrl + "/data/add_user_ka?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time, data).then((res) => {
            let resultObj = res.data;
            this.$vux.loading.hide();
            if (resultObj.code == 0) {
              if (resultObj.data == 0) {
                this.$vux.toast.text("员工录入失败，请重试", "middle");
              } else if (resultObj.data == 2) {
                this.$vux.toast.text("身份证号不能重复，请重试", "middle");
              } else {
                this.$router.push({path: '/punshlist', query: {id: this.id, name: this.companyName}})
              }
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      inputBlur() {
        window.scrollTo(0, 0);
      }
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    },
    components: {
      Datetime,
      PopupPicker
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl"
  .add-wrap
    wh(100%, 100%)
    overflow: hidden
    background: rgba(242, 242, 242, 1)
    .employ-box
      fj(space-between, center)
      wh(100%, 1.28rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      &:nth-child(2)
        margin-bottom: 0.267rem
      &:nth-child(5)
        margin-bottom: 0.267rem
      .title
        margin-left: 0.333rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .address
        flex: 1
        text-align: right
        margin-right: 0.267rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
        height: 0.6rem
        line-height: 0.6rem
      .company
        margin-right: 0.32rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .employ-con
        display: flex
        align-items: center
        flex: 1
        height: 1.28rem
        margin-right: 0.333rem
        .content
          flex: 1
          text-align: right
          height: 0.6rem
          line-height: 0.6rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
      .pic
        margin-right: 0.32rem
        wh(0.32rem, 0.32rem)
      .entry
        flex: 1
        text-align: right
        margin-right: 0.267rem
        height: 0.6rem
        line-height: 0.6rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .entry >>> .weui-cell__ft .vux-cell-placeholder
        color: rgba(204, 204, 204, 1)
      .entry >>> .vux-cell-primary .vux-popup-picker-select .vux-popup-picker-placeholder
        color: rgba(204, 204, 204, 1)
    .btn-box
      position: absolute
      bottom: 0.64rem
      display: flex
      justify-content: center
      align-items: center
      width: 100%
      height: 1.28rem
      .btn
        width: 90.4%
        height: 1.28rem
        line-height: 1.28rem
        background: rgba(60, 175, 255, 1)
        font-size: 0.453rem
        color: rgba(255, 255, 255, 1)
        font-weight: 500
        border-radius: 0.16rem
    .open-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 88
      fj(center, center)
      background-color: rgba(0, 0, 0, 0.5)
      .open-list
        position: fixed
        z-index: 99
        bottom: 0
        left: 0
        wh(100%, 6.44rem)
        background: #FFF
        overflow: auto
        .name
          fj(center, center)
          height: 1.28rem
          border-bottom: 1px solid #EEE
          cursor: pointer
          size-color(0.44rem, #666666)
          &:hover
            color: #3CAFFF
</style>
